import React, { Component } from 'react';
import { Select, Col, Row } from 'antd';

import './ConfigSelect.less';

export default class ConfigSelect extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data,
            defaultVal: this.props.data.selectitem[0].content
        };
    }

    handleSizeChange = (e) => {
        this.props.selectCallback(this.props.model, "select", e);
    };

    render() {
        const Option = Select.Option;
        const children = [];
        this.state.data.selectitem.map((val, index) => {
            children.push(<Option key={index} value={val.desc}>{val.content}</Option>);
        });
        return (
            <div className="select-body">
                <Row className="row-body">
                    <Col className="child-title" span={24}>
                        <p>{this.state.data.title}</p>
                    </Col>
                    <Col className="child-content" span={24}>
                        <Select
                            size="large"
                            defaultValue={this.state.defaultVal}
                            onChange={this.handleSizeChange}>
                            {children}
                        </Select>
                        <img className="img-desc" src={this.state.data.desc_icon} alt="" />
                    </Col>
                </Row>
            </div>
        );
    }
}